<template>
  <div
    class="originProject preview-form"
    style=" background:rgba(255, 255, 255, 0);"
  >
    <div class="comBarChart">
      <div ref="peopleBar" style=" width:600px; height:400px; "></div>
    </div>
  </div>
</template>
<script>
import selfComponents from "@/components/comm/dtTable/components";
import echarts from "echarts";
import { areaValue, areaData } from "@/libs/common";
import { chartOn, chartOff } from "@/libs/tools";
import area from "@/components/comm/area";

export default {
  components: {
    ...selfComponents,
  },
  data() {
    return {
      peopleData: [],
      peopleChartOptions: {
        backgroundColor: "",
        title: {
          show: true,
          text: "人数统计",
          subtext: "各班级男女人数统计",
          left: "center",
          textStyle: { color: "#333", fontSize: 18, fontStyle: "normal" },
          subtextStyle: { color: "#aaa", fontSize: 12, fontStyle: "normal" },
        },
        legend: {
          show: true,
          left: "right",
          orient: "horizontal",
          data: ["男生", "女生"],
        },
        tooltip: {
          show: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          padding: 5,
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          axisPointer: { type: "none" },
        },
        xAxis: {
          type: "category",
          data: [
            {
              value: "高三1班",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
              oldValue: "星期一",
            },
            {
              value: "高三2班",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
              oldValue: "高三1班",
            },
            {
              value: "高三3班",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
              oldValue: "高三1班",
            },
            {
              value: "高三4班",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
              oldValue: "高三1班",
            },
            {
              value: "高三5班",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
              oldValue: "高三1班",
            },
            {
              value: "高三6班",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
              oldValue: "高三1班",
            },
            {
              value: "高三7班",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
              oldValue: "星期日",
            },
          ],
        },
        yAxis: {
          type: "value",
          data: [
            {
              value: "星期一",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
            },
            {
              value: "星期二",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
            },
            {
              value: "星期三",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
            },
            {
              value: "星期四",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
            },
            {
              value: "星期五",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
            },
            {
              value: "星期六",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
            },
            {
              value: "星期日",
              textStyle: { fontSize: 12, fontWeight: "normal", color: "#444" },
            },
          ],
        },
        series: [
          {
            name: "男生",
            type: "bar",
            stack: null,
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
              position: "inside",
              distance: 5,
            },
            data: [120, 200, 150, 80, 70, 110, 130],
          },
          {
            name: "女生",
            type: "bar",
            stack: null,
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
              position: "inside",
              distance: 5,
            },
            data: [20, 50, 150, 90, 70, 410, 30],
          },
        ],
      },
      peopleTheme: "macarons",
      peopleEcharts: "",
      pageRecordId: "456",
      adminAddress: "http://test.xundacloud.com:8081/xundacloudDemeAdmin",
      area,
    };
  },
  mounted() {
    this.peopleGetChartData();
  },
  methods: {
    async peopleGetChartData(params = {}) {
      const rparams = { data: JSON.stringify(params) };
      const resp = await this.axios.post("", {
        ...rparams,
      });
      const { code, data } = resp.data;
      if (code === "E0") {
        this.peopleData = data;
        this.$nextTick(() => this.peopleInit());
      } else {
        this.data = {};
      }
    },
    peopleInit() {
      this.peopleEcharts = echarts.init(this.$refs.peopleBar, this.peopleTheme);
      chartOn(window, "resize", this.resize);
      if (Object.keys(this.peopleData).length === 0) {
        this.peopleEcharts.setOption(this.peopleChartOptions);
      } else {
        let legendArr = [];
        let newSeries = [];
        this.peopleData.seriesList.forEach(item => {
          if (item.chartType === "bar") {
            legendArr.push(item.name);
            let obj = {
              name: item.name,
              type: item.chartType,
              data: item.data,
            };
            newSeries.push(obj);
          }
        });
        this.peopleChartOptions.legend.data = legendArr;
        this.peopleChartOptions.series = newSeries;
        this.peopleEcharts.setOption(this.peopleChartOptions);
      }
    },

    gotoPage(functionPath) {
      this.$router.push({ path: functionPath });
    },
  },
};
</script>
